<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 必要的标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link crossorigin="anonymous" integrity="sha512-6KY5s6UI5J7SVYuZB4S/CZMyPylqyyNZco376NM2Z8Sb8OxEdp02e1jkKk/wZxIEmjQ6DRCEBhni+gpr9c4tvA==" href="https://lib.baomitu.com/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body{
            overflow: hidden;
            background: url("https://webstatic.mihoyo.com/upload/puzzle/2021/11/19/789ff496b71061b2ca84ce374a893326_7169776474003949612.jpg") no-repeat fixed ;
            background-size: cover;
        }
        .w{
            width: 75%;
            margin: 0 auto;
        }
        .header{
            height: 50px;
            background-color: rgba(255, 255, 255, 0.3);
        }

        div{
            color: #121b2d;
        }
        .fl{
            float: left;
        }
        .fr{
            float: right;
                 }
        p{
            margin-top: 115px;
            text-align: center;
            font-size: 55px;
        }
        .warn{
            color: #a5b8db;
            position: absolute;
            top:41%;
            left: 12%;
        }
        .font{

            margin-bottom: 5px;
            font-size: 22px;
        }
        .box-bg{

            background-color: rgba(102, 106, 131, 0.5);
        }

        button{
            border-radius: 5px;
            color: #b4b2b2;
            height: 30px;
            margin-top: 10px;
            border:0;
            background-color: rgba(30, 34, 134, 0.8);
        }
        .user{

            margin-right: 3px;
            margin-top: 10px;
            line-height: 30px;
            text-align: center;
            width: 60px;
            height: 30px;
            background-color: #769dc8;
            border-radius: 5px;
        }
        a{
            display: inline-block;
            color: #1a2044;
            text-decoration: none;
        }
        .box-right{
            border-radius: 5px;
            height: 300px;
            width: 100px;
            background-color: rgba(255, 255, 255, 0.3);
            position: absolute;
            right: -60px;
            transition-duration: 0.7s;
        }
        .box-right:hover{
            right: 0;
        }
        .box-right>a{
            height: 300px;
            width: 100px;
            font-size: 50px;
            text-align: center;
            color: #9B9D9E;
            padding: 75px 20px;
        }

    </style>
</head>
<body>
<div>
<!--    <a th:href="@{/projects/new}" class="btn btn-primary btn-sm mb-3">新增项目</a>-->
    <div class="header">
        <div class="w">
        <div class="fl ">
        <div class="fl user"><a th:href="@{/register}">注册</a></div>
        <div class="fl user"><a th:href="@{/login}">登录</a></div>
        </div>
    <div class="container">
        <form th:action="@{/signs/save}" th:object="${sign}" method="POST">
            <button type="submit" class="fr">给网站点个赞吧 !</button>
        </form>
    </div>
        </div>
    </div>

    <p>基于数据库的 Spring Boot 网站应用</p>
    <div class="fl warn">
    <h1>八大基本要求</h1>
    <div class="font box-bg" th:each="aWarn : ${warns}">
        <div th:text="${aWarn.read}">内容</div>
    </div>
    </div>
</div>
<div class="box-right">
    <a th:href="@{/classification1}" target="_blank">主页</a>

</div>
</body>
</html>